<template>
  <div class="d-flex bg-color-black">
    <div class="d-flex pt-2 pl-2 pr-2">
      <div class="box-title">▍ 首件管理</div>
      <span style="margin-left: auto;">
        <icon name="align-left" class="text-icon"></icon>
      </span>
    </div>
    <div class="com-page">
      <div>
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intervalId: null, //用于存储计时器ID
      allData: null,
      config: {}
    }
  },
  //整个组件加载完成后
  mounted() {
    this.getData()
    // this.intervalId = setInterval(this.getData, 10000)
  },
  beforeDestroy() {
    // 在组件销毁之前清除计时器
    // if (this.intervalId) {
    //   clearInterval(this.intervalId)
    // }
  },
  methods: {
    async getData() {
      const ret = await this.$http.post('http://localhost:9999/production_line/api/first/search', {})
      // console.log(ret.data)
      this.allData = ret.data
      // 将请求回来的数据格式化成表格所需的格式
      const calculateDaysDifference = dateString => {
        const currentDate = new Date()
        const targetDate = new Date(dateString)
        const diffTime = targetDate - currentDate
        const remainDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 15
        return remainDays
      }
      // const testTime = this.allData.map(item => item.testTime)
      // testTime.forEach(date => {
      //   const remainDays = calculateDaysDifference(date)
      //   console.log(`The date ${date} is ${remainDays} days reamin from now.`)
      // })
      const configData = this.allData.map(item => [
        item.testId,
        new Date(item.testTime).toLocaleString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }),
        calculateDaysDifference(item.testTime) <= 5 ? `<span class='colorRed'">${calculateDaysDifference(item.testTime)}</span>` : `${calculateDaysDifference(item.testTime)}`
      ])
      // console.log(configData)
      // const sortedData = configData.sort((a, b) => a[2] - b[2]) //从小到大排序
      // console.log(sortedData)
      this.config = {
        header: ['型号', '检查时间', '剩余天数'],
        data: configData,
        rowNum: 8, //表格行数
        headerHeight: 35,
        headerBGC: '#171c33', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        waitTime: 2000,
        index: true,
        indexHeader: '序号',
        columnWidth: [50],
        align: ['center', 'center', 'center', 'center']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.com-page {
  padding: 1rem 1rem 0 1rem;
}
.dv-scroll-board {
  // width: 100%;
  // height: 100%;
  width: 29vw;
  height: 37vh;
}
</style>
